<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ngMessage</title>
<link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
<link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap-theme.css">
<link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
<script src="../../lib/jquery/jquery-1.10.2.js"></script>
<script src="../../lib/bootstrap3/js/bootstrap.min.js"></script>
<script src="../../lib/angularjs/angular.min.js"></script>
<script src="../../lib/angularjs/angular-messages.min.js"></script>
<script type="text/javascript">
//angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngMessagesExample">
<div class="container theme-showcase" role="main" >
    <form name="myForm" class="form-horizontal" role="form">
        <div class="form-group">
            <label  class="col-sm-3 control-label">名字</label>
            <div class="col-sm-5">
                <input type="text"
                       name="myName"
                       ng-model="name"
                       ng-minlength="5"
                       ng-maxlength="20"
                       ng-pattern="/[a-z]/"
                       required  class="form-control"/>
            </div>
            <div class="col-sm-4">
                <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
                <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"  ng-messages-multiple>
                    <div ng-message="required">必填</div>
                    <div ng-message="minlength">输入信息太短</div>
                    <div ng-message="maxlength">输入太长</div>
                    <div ng-message="pattern">只能输入小写字母</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">年龄</label>
            <div class="col-sm-5">
                <input type="text"
                       name="age"
                       ng-model="age"
                       ng-minlength="1"
                       ng-maxlength="2"
                       ng-pattern="/[0-9]/"
                       required
                       required  class="form-control"/>
            </div>
            <div class="col-sm-4">
                <div ng-messages="myForm.age.$error" style="color:maroon" role="alert"  ng-messages-multiple>
                    <div class='error' ng-messages="myForm.age.$error" ng-messages-include="error.html">
                </div>
            </div
            </div>
        </div>
    </form>
</div>
<script>
    (function(angular) {
        'use strict';
        angular.module('ngMessagesExample', ['ngMessages']);
    })(window.angular);
</script>
<script type="text/ng-template" id="error.html">
    <div ng-message="required">必填</div>
    <div ng-message="minlength">输入信息太短</div>
    <div ng-message="maxlength">输入太长</div>
    <div ng-message="pattern">只能输入数字</div>
</script>
</body>
</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->